<template>
  <div class="root">
    <div class="left">
      <div class="tool">
        <div class="tool-item">
          <span>导入和导出</span>
          <importExport />
        </div>
        <div class="tool-item">
          <span>画布设置</span>
          <svgOption />
        </div>
        <div class="tool-item">
          <span>选中操作</span>
          <targetSelect />
        </div>

        <div class="tool-item">
          <span>矩形</span>
          <rectMenu />
        </div>
        <div class="tool-item">
          <span>圆</span>
          <circle-menu />
        </div>
        <div class="tool-item">
          <span>椭圆</span>
          <ellipse-menu />
        </div>
        <div class="tool-item">
          <span>多边形</span>
          <polygon-menu />
        </div>
        <div class="tool-item">
          <span>曲线</span>
          <polyline-menu />
        </div>

        <div class="tool-item">
          <span>线段</span>
          <lineMenu />
        </div>

        <div class="tool-item">
          <span>线段标注</span>
          <labelMenu />
        </div>
        <div class="tool-item">
          <span>文字标注</span>
          <text-menu />
        </div>
      </div>
    </div>
    <div class="right">
      <svg
        id="mySvg"
        xmlns="http://www.w3.org/2000/svg"
        width="595"
        height="842"
        version="1.1"
      >
        <!-- 选中的滤镜 -->
        <filter id="svgGrayscale">
          <feColorMatrix
            values="0.299 0.587 0.134 0 0 
                    0.299 0.587 0.134 0 0 
                    0.299 0.587 0.134 0 0 
                    0     0     0     1 0"
          />
        </filter>
      </svg>
    </div>
  </div>
</template>
<script>
import importExport from "../../components/import&export/index.vue";
import svgOption from "@/components/svgOption/index.vue";
import target from "../../components/target/index.vue";
import rect from "@/components/rect/index.vue";
import line from "../../components/line/index.vue";
import label from "../../components/label/index.vue";
import text from "../../components/text/index.vue";
import circle from "../../components/circle/index.vue";
import polygon from "../../components/polygon/index.vue";
import polyline from "../../components/polyline/index.vue";
import ellipse from "../../components/ellipse/index.vue";
import { onMounted } from "vue";
import store from "../../store/index.js";
import * as d3 from "d3";
import * as $ from "jquery";
import { mapState } from "vuex";

export default {
  components: {
    importExport,
    svgOption,
    targetSelect: target,
    rectMenu: rect,
    lineMenu: line,
    labelMenu: label,
    textMenu: text,
    circleMenu: circle,
    polygonMenu: polygon,
    polylineMenu: polyline,
    ellipseMenu: ellipse,
  },

  setup() {
    onMounted(() => {
      const svg = d3.select("svg");
      const geo = {
        bg: "#ffffff",
        isVertical: "true",
        size: { w: 595, h: 842 },
      };

      const svgOp = {
        svg,
        geo,
      };

      store.commit("initSvg", svgOp);
      menu();
    });

    function menu() {
      $("span").on("click", function () {
        let form = $(this).next();
        let formState = form.css("display");
        if (formState == "block") {
          form.css({ display: "none" });
        } else {
          form.css({ display: "block" });
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.root {
  height: 1000px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  .left {
    width: 240px;
    padding: 20px;
    height: 100%;
    background-color: #ecf0f1;
    border-right: 2px solid #2c3e50;
  }
  .right {
    flex: 600px;
    background-color: #ecf0f1;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 40px;
    svg {
      border: 1px solid #bdc3c7;
      background-color: #ffffff;
    }
  }
}
.tool {
  width: 200px;
  padding-left: 5px;
  .tool-item {
    min-height: 30px;
    transition: 0.8s;
    span {
      display: block;
      line-height: 30px;
      background-color: #74b9ff;
      color: #000;
      padding-left: 10px;
      border-bottom: 2px solid #2980b9;
      cursor: pointer;
    }
  }
}
</style>